<template>
	<div class="hotSearch">
		<div class="searchTitle">
			热搜词
		</div>
		<div class="hotwordBox">
			<span class="hotword" v-for="item in wordList" @click="wordSel(item.word)">{{item.word}}</span>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['sss'],
		data() {
			return {
				wordList: [],
				url: '',
				word: '',
			}
		},
		created() {
			this.url = window.location.href.split('frontjeecmsx2')[0]

		},
		mounted() {
			this.fetchSearchwordList()
		},
		methods: {
			searchDel() {
				this.$emit('searchDel', false)
			},
			fetchSearchwordList() {
				homeApi.fetchSearchwordList({
					sortType: 1,
					limit: 20
				}, (res) => {
					if (res.code == "00000 00000") {
						this.wordList = res.data
					} else {

					}
				})
			},
			wordSel(word) {
				this.$emit('search', word)
			}
		}
	}
</script>

<style scoped="scoped">
.hotSearch {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 40px;
}
.hotSearch .searchTitle {
  height: 16px;
  font-size: 18px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 16px;
}
.hotSearch .hotwordBox {
  margin-top: 24px;
}
.hotSearch .hotwordBox .hotword {
  display: inline-block;
  background: #F8F8F8;
  border-radius: 4px;
  height: 16px;
  font-size: 16px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
  margin-right: 16px;
}
.hotSearch .hotwordBox .hotword:hover {
  background: #FF3333;
  color: #FFFFFF;
  cursor: pointer;
}

</style>